﻿@namespace BootstrapBlazor.Components
@typeparam TValue
@inherits PopoverCompleteBase<TValue>

<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id">
    <div class="input-group">
        <input @attributes="AdditionalAttributes" id="@InputId" class="@ClassName" autocomplete="off" type="text"
               data-bs-toggle="@ToggleString" data-bs-placement="@PlacementString"
               data-bs-offset="@OffsetString" data-bs-custom-class="@CustomClassString"
               data-bb-auto-dropdown-focus="@ShowDropdownListOnFocusString"
               data-bb-skip-esc="@SkipEscString" data-bb-skip-enter="@SkipEnterString"
               data-bb-scroll-behavior="@ScrollIntoViewBehaviorString"
               data-bb-input="@UseInputString"
               value="@_displayText"
               placeholder="@PlaceHolder" disabled="@Disabled" @ref="FocusElement" />
        @if (ShowClearButton)
        {
            <Button Color="ClearButtonColor" Text="@ClearButtonText" Icon="@ClearButtonIcon" OnClick="OnClearClick" aria-label="Clear"></Button>
        }
        <Button Color="SearchButtonColor" Text="@SearchButtonText" Icon="@ButtonIcon" OnClick="OnSearchClick" aria-label="Search"></Button>
    </div>
    <ul class="dropdown-menu">
        @foreach (var item in FilterItems)
        {
            <li class="dropdown-item" @onclick="() => OnClickItem(item)">
                @if (ItemTemplate != null)
                {
                    @ItemTemplate(item)
                }
                else
                {
                    <div>@GetDisplayText(item)</div>
                }
            </li>
        }
        @if (FilterItems.Count == 0)
        {
            <li class="dropdown-item">@NoDataTip</li>
        }
    </ul>
</div>
